<!--
 * @Date: 2023-09-08 11:01:46
 * @LastEditTime: 2023-09-08 13:20:44
 * 介绍:input 文件选择组件
-->
<script lang="ts" setup>
const props = defineProps<{
  /**是否多选 */
  multiple?: boolean;
  accept?: string;
  width?: string;
  height?: string;
  disabled?: boolean;
}>();
// code...
const emit = defineEmits<{
  (e: "change", v: Event): void;
  (e: "input", v: Event): void;
}>();
</script>
<template>
  <div
    :class="{
      CinputFile__disabled: props.disabled,
      'active': !props.disabled,
    }"
    class="CinputFile"
    :style="{ width, height }"
  >
    <div class="CinputFile_icon CinputFile__center flex-A-C flex-J-C">
      <slot><van-icon name="add-o" /></slot>
    </div>
    <input
      class="CinputFile_input CinputFile__center"
      :="$attrs"
      type="file"
      @change="(e) => emit('change', e)"
      @input="(e) => emit('input', e)"
      :multiple="props.multiple"
      :accept="accept"
      :disabled="props.disabled"
    />
  </div>
</template>
<style lang="scss" scoped>
.CinputFile__disabled {
  opacity: 0.8;
}
.CinputFile {
  position: relative;
  border: 1rem dashed var(--C-T1);
  border-radius: var(--R-sm);
  width: 180rem;
  height: 180rem;

  .CinputFile__center {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .CinputFile_input {
    opacity: 0;
    min-width: 180rem;
    min-height: 180rem;
    height: 100%;
    width: 100%;
  }
}
</style>
